﻿@using PartsUnlimited
@model PartsUnlimited.Models.Product

@{
    ViewBag.Title = $"Product - {Model.Title}";
}

@section scripts
{
    @Html.Script("jquery-zoom")

    <script type="text/javascript">
        $(function () {
            if ($ && $.fn.zoom) {
                $('#product-image').zoom({ magnify : 1.5});
            }
        });
    </script>
}
<div id="store-details">
    <section>
        <h2>@Model.Title</h2>
            <div class="row">
            <div class="col-md-4">
                <div class="details-panel">

                <div class="zoom" id="product-image">
                        @Html.Image(@Model.ProductArtUrl)
                    </div>

                </div>
            </div>
            <div class="col-md-8">
                    <div>
                        <h5>USD $@Model.Price</h5>
                    </div>
                    <div>
                            @if (@Model.Inventory > 0)
                            {
                                <text>In Stock (Ships 1-3 days)</text>
                            }
                            else
                            {
                                <text>@string.Format("Out of Stock (Ships {0}-{1} days)", Math.Max(Model.LeadTime, 1), Model.LeadTime + 2)</text>
                            }
                    </div>
                    <div>
                        <h4>Description</h4>
                        <p class="text-content">@Model.Description</p>
                    </div>

                <div class="details-table">
                    <table class="table table-striped">
                        @foreach (var detail in Model.ProductDetailList)
                        {
                            <tr>
                                <td>@detail.Key</td>
                                <td>@detail.Value</td>
                            </tr>
                        }
                    </table>
                </div>

                <a href="@Url.Action("AddToCart", "ShoppingCart", new { id = Model.ProductId })" class="btn">Add to Cart</a>
            </div>
        </div>
    </section>

    <section class="section-alt">
    @await Component.InvokeAsync("Recommendations", Model)
    </section>
</div>
